---
id: avatar
title: Avatar
description: A graphical representation of the user, often used in profile sections.
---

<ComponentPreview id="Avatar" />

## Anatomy

To set up the avatar correctly, you'll need to understand its anatomy and how we name its parts.

> Each part includes a `data-part` attribute to help identify them in the DOM.

<Anatomy id="avatar" />

## Examples

Learn how to use the `Avatar` component in your project. Let's take a look at the most basic example:

<Example id="basic" />

### Handling Events

Use `onStatusChange` to listen for loading state changes.

<Example id="events" />

### Root Provider

Use the `useAvatar` hook to create the avatar store and pass it to the `Avatar.RootProvider` component. This allows you
to have maximum control over the avatar programmatically.

<Example id="root-provider" />

> If you're using the `Avatar.RootProvider` component, you don't need to use the `Avatar.Root` component.

## Guides

### Next.js Image

Here's an example of how to use the `Image` component from `next/image`.

```tsx
import { Avatar, useAvatarContext } from '@ark-ui/react/avatar'
import { getImageProps, type ImageProps } from 'next/image'

const AvatarNextImage = (props: ImageProps) => {
  const avatar = useAvatarContext()

  const { hidden, ...arkImageProps } = avatar.getImageProps()
  const nextImage = getImageProps(props)

  return (
    <img
      {...arkImageProps}
      {...nextImage.props}
      style={{
        ...props.style,
        // use visibility instead
        visibility: hidden ? 'hidden' : 'visible',
      }}
    />
  )
}

const Demo = () => {
  return (
    <Avatar.Root>
      <Avatar.Fallback>JD</Avatar.Fallback>
      <AvatarNextImage src="..." alt="" width={80} height={80} />
    </Avatar.Root>
  )
}
```

> Refer to this [Github Discussion](https://github.com/chakra-ui/ark/discussions/3147) for more information.

## API Reference

### Props

<ComponentTypes id="avatar" />

### Context

These are the properties available when using `Avatar.Context`, `useAvatarContext` hook or `useAvatar` hook.

<ContextType id="avatar" />
